<template>
 <div class='warpper'>
    <swiper :options="swiperOptions" v-if='showSwiper'>
        <swiper-slide v-for='item of swiperList' :key='item.id' >
              <img class='swiper-image' width='100%' :src='item.imgUrl' alt="">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
 </div>
</template>
<script>
export default {
  name: 'HomeSwiper',
  props: {
    swiperList:Array
  },
  data () {
    return {
      swiperOptions: {
        pagination: '.swiper-pagination',
        loop: true,
        // autoplay:true
      }
    }
  },
  //默认展示第一页
  computed: {
    showSwiper () {
      return this.swiperList.length
    }
  }
  
}
</script>

<style lang="stylus" scoped>
.warpper >>> .swiper-pagination-bullet-active
    background-color :#fff!important;
.warpper
    overflow hidden;
    width 100%;
    height 0;
    padding-bottom 25%;
</style>
